<!--表格组件封装-->
<template>
    <div class="app-container">
        <div class="filter-container">
            <div class="left">
                <slot name="actions">

                </slot>
            </div>
            <div class="right">
                <slot name="search">
                    <!--搜索项-->
                </slot>
            </div>
        </div>

        <slot name="table" :list="list" :listLoading="listLoading" :tableKey="tableKey" >
            <!--表格内容-->
        </slot>

        <pagination v-show=" total > 0 " :total="total" :page.sync="listQuery.page" @pagination="getList" />


    </div>
</template>

<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { parseTime } from '@/utils'

export default {
    name: 'xm-table',
    props:['url'],
    components:{
        Pagination
    },
    data(){
        return {
            tableKey:0,
            listLoading:false,
            //url:"/think",
            list:[],
            total: 0,
            listQuery: {
                page: 1,
                //limit: 20,
                importance: undefined,
                title: undefined,
                type: undefined,
                //sort: '+id'
            },
            whereData:{},        //查询字段

            isAddModalShow:false
        }
    },
    created(){
        setTimeout(() => {
            this.getList()
        },40)
    },
    methods:{
        //获取数据
        getList(){
            const vm = this;

            if(vm.listLoading){
                return false
            }
            let postData = {}
            let url = vm.url

            //基础数据
            postData = {
                page:vm.listQuery.page,
                //limit:vm.listQuery.limit
            }

            //where数据过滤
            let whereData = JSON.parse(JSON.stringify(vm.whereData))
            for(let i in whereData){
                !whereData[i] && delete whereData[i]
            }

            //请求数据组装
            postData = {...postData,...vm.whereData}

            vm.listLoading = true
            vm.$axios.get(url,postData)
            .then((res) => {
                //console.log(res)
                vm.total = res.total
                vm.list = res.data
                vm.listLoading = false
            })
            .catch((res) => {
                console.log(res)
                vm.listLoading = false
            })
        },

        //删除数据
        doDelete(id){
            const vm = this;
            if(vm.listLoading){
                return false
            }
            let url = vm.url
            let postData = {
                id:id
            }

            vm.listLoading = true
            vm.$axios.delete(url,postData)
            .then((res) => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                vm.listLoading = false

                //重新获取数据
                vm.getList()
            })
            .catch((res) => {
                vm.listLoading = false
            })
        },

        where(data = {}){
            const vm = this;
            vm.whereData = data
            vm.reset()
            vm.getList()
        },

        //充值搜索数据
        reset(){
            const vm = this;
            vm.listQuery = {
                page: 1,
                //limit: 20,
                importance: undefined,
                title: undefined,
                type: undefined,
                //sort: '+id'
            }
            vm.total = 0
            vm.list = []
        },

        //删除确认
        delete(id = '', tip){
            var _tips = tip ? tip : '确认删除?'
            if(!id){
                console.warn('请传入id')
                return
            }
            const vm = this;
            this.$confirm(_tips, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                vm.doDelete(id)
            })
            .catch(() => {    //取消

            })
        }
    }
}
</script>

<style scoped>
.filter-container{
    display: flex;
    justify-content: space-between;
}
</style>

